{# TODO 搜索的代码没写 资讯搜索#}
{# TODO 另外拆分base代码出来#}

{% extends "Sales_base.html" %}
{% block title %}
    现代化农业咨询
{% endblock %}


{% block head %}
    <style>
        /* 资讯页面专用样式 */
        .news-container {
            display: flex;
            gap: 2rem;
            padding: 2rem 5%;
            margin-top: 60px;
        }

        /* 侧边栏样式 */
        .news-sidebar {
            width: 280px;
            background: #f8f9fa;
            padding: 1.5rem;
            border-radius: 8px;
            height: fit-content;
        }

        .sidebar-section {
            padding: 1rem;
            margin: 0.5rem 0;
            cursor: pointer;
            border-left: 4px solid transparent;
            transition: all 0.3s;
        }

        .sidebar-section:hover {
            background: #e9ecef;
            border-left-color: #2c7a47;
        }

        .sidebar-section.active {
            background: white;
            border-left-color: #2c7a47;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* 文章列表 */
        .articles-container {
            flex: 1;
        }

        .article-card {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }

        .article-card:hover {
            transform: translateX(5px);
        }

        .article-category {
            color: #2c7a47;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .article-title {
            font-size: 1.2rem;
            margin-bottom: 0.8rem;
        }

        .article-excerpt {
            color: #666;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            color: #999;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .news-container {
                flex-direction: column;
            }

            .news-sidebar {
                width: 100%;
            }
        }
    </style>
{% endblock %}
{% block main %}
    <!-- 农业资讯模块 -->
    <div class="news-container">
        <!-- 左侧分类侧边栏 -->
        <div class="news-sidebar">
            <div class="sidebar-section active" data-category="all">最新动态</div>
            <div class="sidebar-section" data-category="policy">农业政策</div>
            <div class="sidebar-section" data-category="tech">种植技术</div>
            <div class="sidebar-section" data-category="market">市场分析</div>
            <div class="sidebar-section" data-category="weather">气象服务</div>
        </div>

        <!-- 右侧文章列表 -->
        <div class="articles-container" id="articles-container">
            <!-- 文章内容将通过JavaScript动态生成 -->
        </div>
    </div>

    <script>
        // 模拟资讯数据
        const articles = [
            {
                id: 1,
                title: '2023年农业补贴新政策解读',
                category: 'policy',
                content: '近日农业农村部发布最新农业补贴政策，重点支持粮食生产和现代农业发展...',
                date: '2023-08-20',
                views: 1520
            },
            {
                id: 2,
                title: '夏季蔬菜病虫害防治指南',
                category: 'tech',
                content: '针对夏季高温高湿环境容易滋生的常见病虫害，专家提出以下防治方案...',
                date: '2023-08-18',
                views: 2345
            },
            {
                id: 3,
                title: '全国农产品价格走势分析',
                category: 'market',
                content: '7月份主要农产品价格呈现稳中有升态势，其中蔬菜类价格涨幅较为明显...',
                date: '2023-08-15',
                views: 1890
            },
            {
                id: 4,
                title: '台风预警及农业防范措施',
                category: 'weather',
                content: '中央气象台发布台风蓝色预警，建议农户做好大棚加固和排水准备...',
                date: '2023-08-19',
                views: 1678
            },
            {
                id: 5,
                title: '智慧农业技术应用案例分享',
                category: 'tech',
                content: '介绍国内某现代农业基地采用物联网技术实现精准种植的成功经验...',
                date: '2023-08-17',
                views: 2789
            }
        ];

        // 渲染文章函数
        function renderArticles(category = 'all') {
            const container = document.getElementById('articles-container');
            container.innerHTML = '';

            const filteredArticles = category === 'all'
                ? articles
                : articles.filter(a => a.category === category);

            filteredArticles.forEach(article => {
                const categoryMap = {
                    policy: '农业政策',
                    tech: '种植技术',
                    market: '市场分析',
                    weather: '气象服务'
                };

                const card = document.createElement('div');
                card.className = 'article-card';
                card.innerHTML = `
                    <div class="article-category">${categoryMap[article.category]}</div>
                    <h3 class="article-title">${article.title}</h3>
                    <p class="article-excerpt">${article.content}</p>
                    <div class="article-meta">
                        <span>${article.date}</span>
                        <span>阅读量：${article.views}</span>
                    </div>
                `;
                container.appendChild(card);
            });
        }

        // 侧边栏点击事件
        document.querySelectorAll('.sidebar-section').forEach(item => {
            item.addEventListener('click', () => {
                // 移除所有active类
                document.querySelectorAll('.sidebar-section').forEach(c =>
                    c.classList.remove('active'));

                // 添加active类到当前点击项
                item.classList.add('active');

                // 获取分类并渲染文章
                const category = item.dataset.category;
                renderArticles(category);
            });
        });

        // 初始渲染
        renderArticles();
    </script>
{% endblock %}